import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Row, Col, Empty } from 'antd';
import { history, useModel } from '@umijs/max';
import { createStyles } from 'antd-style';
import {
  AppstoreOutlined,
  BankOutlined,
  SwapOutlined,
  DollarOutlined,
  AccountBookOutlined,
} from '@ant-design/icons';

const useStyles = createStyles(({ token }) => ({
  cardContainer: {
    height: '100%',
    padding: '24px',
  },
  card: {
    height: '280px',
    cursor: 'pointer',
    transition: 'all 0.3s',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    '&:hover': {
      transform: 'translateY(-6px)',
      boxShadow: token.boxShadowSecondary,
    },
  },
  icon: {
    fontSize: '48px',
    color: token.colorPrimary,
    marginBottom: '16px',
  },
  title: {
    fontSize: '20px',
    fontWeight: 'bold',
    color: token.colorTextHeading,
    marginBottom: '12px',
  },
  description: {
    fontSize: '14px',
    color: token.colorTextSecondary,
    padding: '0 24px',
  },
  stats: {
    marginTop: '16px',
    fontSize: '14px',
    color: token.colorTextSecondary,
  },
  header: {
    marginBottom: '40px',
    textAlign: 'center',
  },
  welcomeTitle: {
    fontSize: '32px',
    fontWeight: 'bold',
    color: token.colorTextHeading,
    marginBottom: '16px',
  },
  welcomeText: {
    fontSize: '16px',
    color: token.colorTextSecondary,
    maxWidth: '800px',
    margin: '0 auto',
    lineHeight: '1.8',
  },
}));

// 根据产品类型映射图标
const getProductIcon = (productName: string) => {
  const iconMap = {
    '贴现融资': <SwapOutlined />,
    '抵质押融资': <BankOutlined />,
    // 可以添加更多产品类型的图标映射
    'default': <DollarOutlined />
  };

  return iconMap[productName] || iconMap.default;
};

// 根据产品类型映射颜色
const getProductColor = (productName: string) => {
  const colorMap = {
    '贴现融资': '#1890ff',
    '抵质押融资': '#52c41a',
    // 可以添加更多产品类型的颜色映射
    'default': '#722ed1'
  };

  return colorMap[productName] || colorMap.default;
};

// 生成产品描述
const generateDescription = (product: any) => {
  const financeDirection = product.financeDirection === 1 ? '正向' : '反向';
  const financeMode = product.financeMode === 1 ? '线上' : '线下';
  return `${financeDirection}融资 | ${financeMode}模式`;
};

const Welcome: React.FC = () => {
  const { styles } = useStyles();
  const { initialState } = useModel('@@initialState');
  const [systemCards, setSystemCards] = useState<any[]>([]);

  useEffect(() => {
    // 从本地存储或全局状态获取产品数据
    const products = initialState?.products || JSON.parse(localStorage.getItem('user_products') || '[]');

    // 转换产品数据为卡片数据
    const cards = products.map((product: any) => ({
      title: product.financeProduct,
      description: generateDescription(product),
      icon: getProductIcon(product.financeProduct),
      path: `/product/${product.productId}`,
      color: getProductColor(product.financeProduct),
      stats: `成功率: ${(product.financeChanceS * 100).toFixed(0)}%`,
    }));

    setSystemCards(cards);
  }, [initialState?.products]);

  const handleCardClick = (path: string) => {
    history.push(path);
  };

  return (
    <PageContainer
      header={{
        title: false,
        breadcrumb: {},
      }}
    >
      <div className={styles.cardContainer}>
        {/* 新增欢迎区域 */}
        <div className={styles.header}>
          <div className={styles.welcomeTitle}>欢迎使用企业服务平台</div>
          <div className={styles.welcomeText}>
            我们为您提供多样化的金融服务解决方案，包括贴现融资、抵质押融资等产品，
            帮助您的企业快速获得资金支持，实现业务增长。
          </div>
        </div>

        {systemCards.length > 0 ? (
          <Row gutter={[24, 24]}>
            {systemCards.map((card, index) => (
              <Col xs={24} sm={12} md={12} lg={6} key={index}>
                <Card
                  hoverable
                  className={styles.card}
                  onClick={() => handleCardClick(card.path)}
                  bordered={false}
                >
                  <div style={{ color: card.color }} className={styles.icon}>
                    {card.icon}
                  </div>
                  <div className={styles.title}>{card.title}</div>
                  <div className={styles.description}>{card.description}</div>
                  <div className={styles.stats}>{card.stats}</div>
                </Card>
              </Col>
            ))}
          </Row>
        ) : (
          <Empty description="暂无可用产品" />
        )}
      </div>
    </PageContainer>
  );
};

export default Welcome;
